<template>
  <div>
    <div>
      <button @click="comName = 'UserName'">账号密码填写</button>
      <button @click="comName = 'UserInfo'">个人信息填写</button>
    </div>
    <p>显示注册组件</p>
    <!-- <UserName></UserName>
    <UserInfo></UserInfo> -->
    <component :is="comName"></component>
    <hr>
    <div class="box" v-left="100"></div>

    <div class="box2" v-active="0">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
    </div>
  </div>
</template>

<script>
import UserName from "./components/UserName.vue"
import UserInfo from "./components/UserInfo.vue"
export default {
  data() {
    return {
      comName: 'UserName',
    };
  },
  components: {
    UserName,
    UserInfo
  }
};
</script>

<style scoped>
  .box {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
</style>
